<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>账号管理</title>
		<link rel="stylesheet" href="../../../css/base.css" />
		<link rel="stylesheet" href="../../../css/common.css" />
		<!-- Bootstrap Core CSS -->
		<link href="../../../sbadmin/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
		<!-- MetisMenu CSS -->
		<link href="../../../sbadmin/bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
		<!-- DataTables CSS -->
		<link href="../../../sbadmin/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
		<!-- Custom CSS -->
		<link href="../../../sbadmin/dist/css/sb-admin-2.css" rel="stylesheet">
		<!-- Custom Fonts -->
		<link href="../../../sbadmin/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
		<style>
			body {
				padding: 0 15px !important;
			}
			
			#dataTables-example_length {
				position: absolute;
				top: -35px;
				left: 30px;
				z-index: 1000;
			}
		</style>
	</head>

	<body style="background:#FFF;">
		<div class="comm-tt-font pr">
			账号管理
			<a href="add.html" class="add-member-btn">新建帐号</a>
		</div>
		<div class="member-search-box">
			<div class="msb-ico">筛选条件</div>
			<div class="msb-ccbox">
				<div class="wo-form-item clb">
					<div class="fl mb10">
						<div class="wo-form-itemtt fl">账号：</div>
						<div class="wo-form-itemcc fl">
							<input type="text" class="item-input" id="memNum" />
						</div>
					</div>
					<div class="fl mb10">
						<div class="wo-form-itemtt fl">手机号：</div>
						<div class="wo-form-itemcc fl">
							<input type="text" class="item-input" id="memTel" />
						</div>
					</div>
					<div class="fl mb10">
						<div class="wo-form-itemtt fl">角色：</div>
						<div class="wo-form-itemcc fl">
							<select class="item-select" id="memSex"></select>
						</div>
					</div>
					<div class="fl mb10">
						<div class="wo-form-itemtt fl">门店：</div>
						<div class="wo-form-itemcc fl">
							<ul class="shop-type clb" id="shopType"></ul>
						</div>
					</div>
				</div>
				<div class="clb mt10" style="margin-left: 80px;">
					<a href="javascript:void(0);" id="czBtn" class="fl commqx-btn">重置</a>
					<a href="javascript:void(0);" class="fl commqr-btn ml15" id="searchCfm">确定</a>
				</div>
			</div>
		</div>

		<div class="bars-box pr">
			<div style="width: 100%;height: 50px;position: relative;">
				<a data-type="xls" class="expbtn fr mt10 mr10" id="export" href="javascript:;">导出列表</a>
			</div>
			<div class="panel-body" style="padding-top: 0 !important;">
				<div class="dataTable_wrapper" id="app">
					<table class="table table-striped table-bordered table-hover" id="dataTables-example">
						<thead>
							<tr>
								<th>账号</th>
								<th>手机号</th>
								<th>角色</th>
								<th>门店</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="list-td">

						</tbody>
					</table>
				</div>
				<!-- /.table-responsive -->
			</div>
			<div class="no-tit">
				<img class="no-pic" src="../../../img/error.jpg" />
				<p class="no-txt">没有符合筛选条件的记录</p>
			</div>
		</div>

		<!-- jQuery -->
		<script src="../../../sbadmin/bower_components/jquery/dist/jquery.min.js"></script>
		<!-- Bootstrap Core JavaScript -->
		<script src="../../../sbadmin/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<!-- Metis Menu Plugin JavaScript -->
		<script src="../../../sbadmin/bower_components/metisMenu/dist/metisMenu.min.js"></script>
		<!-- DataTables JavaScript -->
		<script src="../../../sbadmin/bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
		<script src="../../../sbadmin/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
		<!-- Custom Theme JavaScript -->
		<script src="../../../sbadmin/dist/js/sb-admin-2.js"></script>
		<script src="../../../js/layer/layer.js"></script>
		<script src="../../../js/common.js"></script>
		<script type="text/javascript" src="../../../js/jquery-ui.min.js"></script>
		<script type="text/javascript" src="../../../js/Blob.js"></script>
		<script type="text/javascript" src="../../../js/FileSaver.js"></script>
		<script type="text/javascript" src="../../../js/tableExport.js"></script>
		<!-- Page-Level Demo Scripts - Tables - Use for reference -->
	</body>
	<script>
		$("#czBtn").click(function() {
			location.reload();
		})
		//渲染角色
		$.ajax({
			url: "https://order.wz1996.wang/wzbg/role/all",
			type: 'get',
			contentType: 'application/json',
			beforeSend: function(request) {
				request.setRequestHeader("token", localStorage.getItem("token"));
			},
			success: function(data) {
				console.log(data);
				if(data.code == "1") {
					//登录状态
					var html = "";
					html += "<option value=''>--请选择--</option>"
					for(var i = 0; i < data.length; i++) {
						html += "<option value='" + data[i].id + "'>" + data[i].name + "</option>"
					}
					$("#memSex").html(html);
				} else if(data.code == "-1") {
					layar(data.msg);
					setTimeout("window.parent.frames.location.href='/xcxadmin/login.html'", 1000)
				}

			},
			error: function(e) {
				errcode(e);
			}
		});
		//渲染门店
		$.ajax({
			url: "https://order.wz1996.wang/wzbg/store/all",
			type: 'get',
			contentType: 'application/json',
			beforeSend: function(request) {
				request.setRequestHeader("token", localStorage.getItem("token"));
			},
			success: function(data) {
				console.log(data);
				if(data.code == "1") {
					//登录状态
					var html = "";
					for(var i = 0; i < data.data.length; i++) {
						html += "<li id=" + data.data[i].id + ">" + data.data[i].name + "</li>";
					}
					$("#shopType").html(html);
				} else if(data.code == "-1") {
					layar(data.msg);
					setTimeout("window.parent.frames.location.href='/xcxadmin/login.html'", 1000)
				}

			},
			error: function(e) {
				errcode(e);
			}
		});

		function remove(arr, val) {
			var index = arr.indexOf(val);
			if(index > -1) {
				arr.splice(index, 1);
			}
		}
		var shopType = []; //门店类型
		$("#shopType").on("click", "li", function() {
			var hasClass = $(this).hasClass("cur");
			var th = {};
			if(hasClass) {
				$(this).removeClass("cur");
				for(var i = 0; i < shopType.length; i++) {
					if(shopType[i].id == $(this).attr("id")) {
						shopType.splice(i, 1);
						i--;
					}
				}
			} else {
				$(this).addClass("cur");
				th['id'] = $(this).attr("id");
				shopType.push(th);
			}
		})
		var role = [];
		$("#searchCfm").click(function() {
			var uname = $("#memNum").val();
			var tel = $("#memTel").val();
			var jueS = $("#memSex option:selected").val();
			if(jueS == "" || jueS == null || jueS == undefined) {
				role = []
			} else {
				role = [{
					"id": jueS,
					"name": $("#memSex option:selected").html()
				}]
			}

			getList(uname, tel, role, shopType);
		})
		getList("", "", role, shopType);

		function getList(uname, tel, role, store) {
			$("#dataTables-example").dataTable().fnDestroy();
			var user = {
				"login": {
					"identifier": uname
				},
				"roles": role,
				"stores": store,
				"user": {
					"type": "",
					"phone": tel
				}
			}
			$.ajax({
				url: "https://order.wz1996.wang/wzbg/user/query",
				type: 'post',
				contentType: 'application/json',
				data: JSON.stringify(user),
				beforeSend: function(request) {
					request.setRequestHeader("token", localStorage.getItem("token"));
				},
				success: function(data) {
					console.log(data)
					if(data.code == "1") {
						var html = "";
						for(var i = 0; i < data.data.length; i++) {
							html += "<tr class='odd gradeX'>";
							html += "<td>" + data.data[i].login.identifier + "</td>";
							html += "<td>" + data.data[i].user.phone + "</td>";
							if(data.data[i].user.type == "1") {
								html += "<td>管理员</td>";
							} else if(data.data[i].user.type == "2") {
								html += "<td>前台</td>";
							}
							/*for(var j = 0; j < data.data[i].roles.length; j++) {
								html += "<td>" + data.data[i].roles[j].name + "</td>";

							}*/
							html += "<td>";
							if(data.data[i].stores == undefined || data.data[i].stores == null || data.data[i].stores == "") {
								html += "<span class='mr5'>--</span>";
							} else {
								for(var s = 0; s < data.data[i].stores.length; s++) {
									html += "<span class='mr5' id='" + data.data[i].stores[s].id + "'>" + data.data[i].stores[s].name + "</span>";
								}
							}

							html += "</td>";
							html += "<td><a href='edit.html' class='sDetail editBrn' id='" + data.data[i].login.userId + "'>修改</a><a href='javascript:void(0)' class='sDetail delPer ml10' id='" + data.data[i].login.userId + "'>删除</a><a href='update.html' class='sDetail ml10 fzPwd' lid='" + data.data[i].login.id + "' uid='" + data.data[i].user.id + "'>重置密码</a></td>";
							html += "</tr>";
						}
						$("#list-td").html(html);
						$('#dataTables-example').DataTable({
							responsive: false,
							bLengthChange: true,
							aLengthMenu: [
								[10, 25, 50, 100, -1],
								[10, 25, 50, 100, "所有"]
							], // 定义每页显示数据数量
							bSort: true,
							paging: true,
							bFilter: true,
							searching: false,
							bInfo: true,
							bAutoWidth: true,
							"oLanguage": {
								"sLengthMenu": "每页显示 _MENU_ 条记录",
								"sZeroRecords": "抱歉， 没有找到",
								"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
								"sInfoEmpty": "没有数据",
								"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
								"oPaginate": {
									"sFirst": "首页",
									"sPrevious": "前一页",
									"sNext": "后一页",
									"sLast": "尾页"
								},
								"sSearch": "查询条件:",
								"sZeroRecords": "没有检索到数据",
								"sProcessing": "<img src='./loading.gif' />"
							}
						});
					} else if(data.code == "-1") {
						layar(data.msg);
						setTimeout("window.parent.frames.location.href='/xcxadmin/login.html'", 1000)
					} else {
						layar(data.msg);
					}

				},
				error: function(e) {
					errcode(e);
				}
			});
		}
		//修改密码
		$("#list-td").on("click", ".fzPwd", function() {
			var lid = $(this).attr("lid");
			var uid = $(this).attr("uid");
			localStorage.setItem("loginId", lid);
			localStorage.setItem("userId", uid);
		});
		//查看详情
		$("#list-td").on("click", ".editBrn", function() {
			var id = $(this).attr("id");
			localStorage.setItem("id", id);
		});
		//删除
		$("#list-td").on("click", ".delPer", function() {
			var id = $(this).attr("id");
			layer.confirm('您确定删除吗？', {
				btn: ['确定', '取消'], //按钮
				offset: '25%'
			}, function(index) {
				$.ajax({
					url: "https://order.wz1996.wang/wzbg/user/remove/" + id,
					type: 'DELETE',
					contentType: 'application/json',
					beforeSend: function(request) {
						request.setRequestHeader("token", localStorage.getItem("token"));
					},
					success: function(data) {
						console.log(data);
						//登录状态
						if(data.code == "1") {
							layar("删除成功");
							getList("", "", "");
						} else if(data.code == "-1") {
							layar(data.msg);
							setTimeout("window.parent.frames.location.href='/xcxadmin/login.html'", 1000)
						} else {
							layar(data.msg);
						}
					},
					error: function(e) {
						errcode(e);
					}
				});
			});

		});
	</script>

</html>